<template>
  <div class="box">
    <div class="title">
      <img
        src="https://preview.keenthemes.com/metronic/theme/html/demo2/dist/assets/media/svg/misc/015-telegram.svg"
        alt=""
      />
      <h3>健康信息管理后台</h3>
    </div>
    <!-- <div class="menu">
     <ul>
         <li>数据概览</li>
         <li>医生信息管理</li>
         <li>用户信息管理</li>
         <li>其他</li>
     </ul>
    </div> -->
    <div class="avator">
      <img src="../assets/img/ava3.webp" alt="" />
      <div style="display: flex; flex-direction:column;margin-right:10px;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);boradius:5px">
        <div style="width=100%; margin:5px;">
          <el-tag size="mini" type="success">{{ "时间：" + weatherDate.obsTime }}</el-tag>
          <el-tag size="mini" type="danger">{{ "当前温度：" + weatherDate.temp }}</el-tag>
          <!-- <el-tag size="mini" type="primary">{{
            "体感温度：" + weatherDate.feelsLike
          }}</el-tag> -->
        </div>
        <div  style="width=100%;margin:5px;">
          <el-tag size="mini" type="success">{{ "天气：" + weatherDate.text }}</el-tag>
          <el-tag size="mini" type="info">{{ "风速：" + weatherDate.windDir + weatherDate.windScale}}</el-tag>
          <el-tag size="mini" type="warning">{{ "能见度：" + weatherDate.vis }}</el-tag>
          <el-tag size="mini">{{ "降水量" + weatherDate.precip }}</el-tag>
        </div>
      </div>
      <el-button type="danger" @click="loginOut">退出登录</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      weatherDate: {},
    };
  },
  methods: {
    loginOut() {
      window.sessionStorage.clear();
      this.$router.push("/login");
      this.$notify.success("已退出系统");
    },
    getWesther() {
      this.$http
        .get(
          "https://devapi.qweather.com/v7/weather/now?location=101080601&key=dec0a98bee5244c1b354a2c10f531e45"
        )
        .then((res) => {
          this.weatherDate = res.data.now;
        });
    },
  },
  created() {
    this.getWesther();
  },
};
</script>

<style scoped>
.box {
  width: 80%;
  margin: 0 auto;
  height: 100%;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  background: #fff;
}
.title {
  height: 100%;
  box-sizing: border-box;
  padding: 10px;
  display: flex;
}
.title img {
  width: 60px;
  height: 60px;
  box-sizing: border-box;
}
.title h3 {
  line-height: 60px;
  margin: 0 0 0 10px;
}
.menu ul {
  height: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  box-sizing: border-box;
  padding: 10px;
  box-sizing: border-box;
}
.menu ul li {
  line-height: 40px;
  width: 100px;
  height: 45px;
  display: block;
  cursor: pointer;
  text-align: center;
  margin: 0 10px;
  padding: 5px 10px;
  color: #3699ff;
  border-radius: 10px;
  border: 1px solid #f56c6c;
}
.menu ul li:hover {
  background-color: rgba(77, 89, 149, 0.06);
}
.menu ul li:first-child {
  background-color: rgba(77, 89, 149, 0.06);
}
.avator {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 14px;
}
.avator img {
  width: 70px;
  height: 70px;
  padding: 5px;
  box-sizing: border-box;
  border-radius: 50%;
  background-color: lemonchiffon;
  border: 1px solid lightskyblue;
  margin: 0 10px;
  cursor: pointer;
}
.avator .el-button {
  margin-right: 8px;
  border-radius: 10px;
}
.avator .el-tag{
  margin: 2px;
}
</style>
